<template>
    <div class="view loginBox">
        <div class="login-title roles-title">
            <h1>选择登录角色</h1>
            <p>勾选的是上次所选角色</p>
        </div>
        <div class="role-content">
            <div class='role-body' ref="role-body">
                <ul class='role-list clearfix' :style="'width:'+listWidth+'px;'">
                    <li class='role-li left' v-for="(item,index) in roleList" :key="index" @click="choseRole(item,index)" v-if="item.sstUserType!=1">
                        <div class="role-box">
                            <span class="chose-icon" v-if="choseNum == index"></span>
                            <div class='head'>
                                <img :src="item.userAvatar ? item.userAvatar : headError" :onerror="headError">
                                <span :class="item.sstUserType==2?'t':''">{{item.sstUserType==2?'教':'学'}}</span>
                            </div>
                            <div class='name'>{{item.sstUserTruename}}</div>
                            <div class='class'>{{item.sstUserType==2?'':(item.classList&&item.classList[0]?item.classList[0].sstClassName:'')}}</div>
                            <div class='school'>{{item.schoolInfo?item.schoolInfo.sstSchoolName:''}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
	</div>
</template>

<script>
import * as api from '@/api/index';
export default {
	name: 'roles',
    data(){
        return{
            choseNum: -1,
            listWidth:0,    
            roleList: JSON.parse(localStorage.getItem("rolesList")),            //用户列表
            userInfo: {},                                                       //当前选择的用户信息
            userId: this.$store.state.userId,                                         //当前选择的用户Id
            headError: this.$store.state.headError
        }
    },
    mounted(){
        this.getInit()
    },
    methods:{
        getInit(){
            sessionStorage.clear()
            let liW=document.getElementsByClassName("role-li")[0].offsetWidth+1
            this.listWidth=this.roleList.length*liW;
            this.$nextTick(()=>{
                if(this.userId){
                    let i=this.roleList.findIndex(item => item.userId === this.userId);
                    this.choseNum = i
                    this.$refs['role-body'].scrollLeft=164*i
                }
            })
        },
        // 选角
        choseRole(item, index){
            this.choseNum = index;
            this.userInfo = item;
            localStorage.setItem("userId",this.userInfo.userId);
            this.$store.dispatch("setUserId",this.userInfo.userId)
            localStorage.setItem("userInfo",JSON.stringify(this.userInfo));
            this.getUserInfo()
        },
        /*****
		 * 获取活动信息
		 * sstUserType: 1管理 2教师 3学生
		 * stagesType: 1报名 2初赛 3复赛
		 * ****/ 
        async getUserInfo(){
			var data = {
                userId: this.userInfo.userId
			}
			var res = await api.getUserInfo(data)
			if(res.resultCode == 1){
				let resVal =  res.value
				localStorage.setItem("userInfo",JSON.stringify(resVal));
				if(resVal.stagesType == 1) this.$router.replace({path:'/signup'});	
				else if(resVal.stagesType == 2) this.$router.replace({path:'/preliminary'});
				else{
                    this.$LayerTips({
                        content: "暂未开始新的阶段...",
                        time: 1500
                    });
				}
			}
		},
        // 跳转
        goPage(isjoin){
            
        },
    },
}
</script>

<style lang="scss">

</style>
